<template>

  <div class="Document">
    <el-container>
    <el-aside class="document-aside" width="150px" >
      <el-scrollbar style="height: 500px" >
    <el-menu :default-active="activeIndex" class="el-menu-demo"  @select="handleSelect">
      <el-menu-item
        v-for="(item,index) in docData"
        :index="index">{{item.name}}</el-menu-item>

    </el-menu>
      </el-scrollbar>
      </el-aside>
      <el-main >
        <div class="ql-container ql-snow">
          <div class="ql-editor" v-html="description">
            {{description}}
          </div>
        </div>
        </el-main>
      </el-container>
  </div>
</template>

<script>
  export default {
    name: "Document",
    data() {
      return {
        docData:[],
        activeIndex: '0',
        description:'',
      };
    },
    mounted(){
      this.getDocData();
    },
    methods: {
      handleSelect(key, keyPath) {
        this.description  = this.docData[key].description;
        console.log(key, keyPath);
      },
      getDocData(){
        this.$api.doc.findPage().then((res)=>{
          console.log(res.data);
          this.docData = res.data;
          this.description = this.docData[0].description
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .Document{
  }
  .document-aside {
    height: 500px;
    margin-top: 10px;
  }

</style>
